Page 79 - 2629_Devagiri_C-7
P. 79
Ask
AGENT
OrangeAI
Create an HTML document with the title Gymnastics. Add styling properties like colour, background
colour, etc.
Study
BACKGROUND PROPERTIES
CSS background properties style and control element backgrounds. The table shows properties,
values and descriptions:
Property Name Value Description
BACKGROUND-COLOR Any valid colour value (name, This property sets the background
HEX, RGB, HSL, etc.) colour of an element.
BACKGROUND-IMAGE URL of image This property sets an image as the
background of an element.
BACKGROUND-REPEAT REPEAT, NO-REPEAT, This property determines how
REPEAT-X, REPEAT-Y background images are repeated.
BACKGROUND-POSITION LEFT, RIGHT, TOP, BOTTOM, This property sets the position of
CENTER or COORDINATES the background image.
BACKGROUND-SIZE CONTAIN, COVER, AUTO, This property specifies the size of
HEIGHT/WIDTH in PX or % the background within an element.
Code
4 Write the HTML code to present the given web page using background properties.
<!DOCTYPE HTML>
<HTML>
<HEAD> In CSS, 1 inch is equal to 96
pixels.
<TITLE>Using Background Properties</TITLE>
</HEAD>
<BODY STYLE="BACKGROUND-IMAGE: URL('astronaut.jpg');
BACKGROUND-SIZE: 500px 500px;">
<H1 STYLE="
BACKGROUND-COLOR: MEDIUMPURPLE;">
Exploring the Universe</H1>
</BODY>
</HTML>
Note: Ensure that the astronaut.jpg file is in the same folder as the HTML file.
77
CSS3–Styling Basics
